<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* *{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			} */
			.warn{
				color: red;
			}
			.align-right{
				padding-right: 3px;
				text-align: right;
			}
			span{
				padding: 2px;
			}
			textarea{
				resize: none;
			}
		</style>
	</head>
	<body>
		<h1>注册表单</h1>     <!-- enctype="multipart/form-data" 理由有file文件上传，所以要写 -->
		<form action="" method="" enctype="multipart/form-data">
			<table border="1" cellspacing="0" cellpadding="0" width="75%">
				<tr>
					<td class="align-right"><label for ="username">用户名:</label></td>
					<td><input type="text" name="username" id="username"
					placeholder="请输入合法用户名" pattern="^[a-zA-Z]{6,12}$"
					required  maxlength="20"><span class="warn">*用户名只能只能包含
					字母且长度为6~12位</span></td>
				</tr>
				<tr>
					<td class="align-right"><label for="password">密码:</label></td>
					<td><input type="text" name="password" id="password" placeholder="请输入密码"
					required maxlength="20"><span class="warn">*请输入密码</span></td>
				</tr>
				<tr>
					<td class="align-right"><label for="repassword">确认密码:</label></td>
					<td><input type="text" name="password" id="repassword" placeholder="请再次输入密码"
					required maxlength="20"><span class="warn">*两次密码一致</span></td>
				</tr>
				<tr>
					<td class="align-right"><label for="email">邮箱:</label></td>
					<td><input type="email" name="" id="email" placeholder="请输入合法邮箱"
					 required/><span class="warn">邮箱只能填写QQ邮箱</span></td>
				</tr>
				<tr>
					<td class="align-right"><label for="birth">出生日期:</label></td>
					<td><input type="date" name="birth" id="birth" required/></td>
				</tr>
				<tr>
					<td class="align-right"><label for="age">年龄:</label></td>
					<td><input type="number" name="age" id="age" min="1" max="150" /></td>
				</tr>
				<tr> <!-- 如果有多个文件上传，就要写成数组形式加上multiple -->
					<td class="align-right"><label for="face">头像:</label></td>
					<td><input type="file" name="face[]" id="face" multiple></td>
				</tr>
				<tr>
					<td class="align-right"><label>兴趣爱好:</label></td>
				    <td>
						<input type="checkbox" name="fav[]" checked>足球
					    <input type="checkbox" name="fav[]" checked>篮球
					    <input type="checkbox" name="fav[]">网球
					    <input type="checkbox" name="fav[]">羽毛球 <br>
					    <input type="checkbox" name="fav[]">跑步
						<input type="checkbox" name="fav[]">唱歌
						<input type="checkbox" name="fav[]">聊天
						<input type="checkbox" name="fav[]">打游戏
						<input type="checkbox" name="fav[]">其他
					</td>
				</tr>
				<tr>
					<td class="align-right"><label>是否结婚:</label></td>
					<td>
						<input type="radio" name="married">已婚
						<input type="radio" name="married">未婚
						<input type="radio" name="married" checked>保密
					</td>
				</tr>
				<tr>
					<td class="align-right"><label for="girl">择偶范围:</label></td>
				    <td>18<input type="range" min="18" max="60" value="30">60</td>
				</tr>
				<tr>
					<td class="align-right"><label for="tel">电话号码:</label></td>
				    <td><input type="tel" name="tel" id="tel" placeholder="请输入你的手机号码">
		           <span class="warn">*手机号码必须为合法中国手机号</span></td>
				</tr>
				<tr>
					<td class="align-right"><label for="addr">地址:</label></td>
					<td>
						<select name="addr" name="addr">
							<optgroup label="华北地区">
								<option value ="beijing">北京</option>
								<option value ="hebei">河北</option>
								<option value ="tinajin">天津</option>
							</optgroup>
							<optgroup label="华南地区">
								<option value ="shanghia">上海</option>
								<option value ="nanjing">南京</option>
								<option value ="suzhou">苏州</option>
							</optgroup>
							<option value ="xianggang" selected>香港</option>
							<option value ="aomen">澳门</option>
						</select>
					</td>
				</tr>
				<tr>
					<td class="align-right"><label for="course">所学课程:</label></td>
				    <td>
						<select name="course" id="course" size="5" multiple>
							<option value="js">JS</option>
							<option value="php" selected>PHP</option>
							<option value="jquery">JQuery</option>
							<option value="htl\ml" selected>HTML</option>
							<option value="css">CSS</option>
						</select>
					</td>
				</tr>
				<tr>
					<td class="align-right"><label>个人简介:</label></td>
					<td><textarea rows="10" cols="50" placeholder="最多输入100个字符的个人简介"></textarea></td>
				</tr>
				<tr>
					<td class="align-right"><label for="color">幸运色:</label></td>
					<td>
						<input type="color" name="color" id="color" list="colors">
						<datalist id="colors">
							<option value="green">green</option>
							<option value="blue">blue</option>
							<option value="black">black</option>
							<option value="pink">pink</option>
							<option value="skyblue">skyblue</option>
						</datalist>
					</td>
				</tr>
				<tr>
					<td colspan="2" style="height: 70px; text-align: center;">
						<input type="submit" value="立即注册"/>
						<input type="reset" value="重新填写" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>
